//这段代码定义了一个名为 PictureEditWebSocket 的 TypeScript 类，用于管理与后端进行图片编辑相关的 WebSocket 通信。
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'

export default class PictureEditWebSocket {
  private pictureId: number // 当前编辑的图片 ID
  private socket: WebSocket | null // WebSocket 实例
  private eventHandlers: any // 自定义事件处理器
  private token: string

  /**
   * 构造函数，初始化一个 PictureEditWebSocket 实例。
   * @param pictureId - 当前正在编辑的图片的唯一标识符。
   */
  constructor(pictureId: number, token: string) {
    this.pictureId = pictureId
    this.socket = null // 初始化时没有 WebSocket 连接
    this.eventHandlers = {} // 初始化自定义事件处理器
    this.token = token
  }

  /**
   * 初始化 WebSocket 连接。
   * 建立到指定 URL 的 WebSocket 连接。此方法还设置了几个监听器来处理不同的 WebSocket 事件（如连接打开、消息接收、连接关闭和错误）：
   *
   * 当 WebSocket 连接成功时，会触发 'open' 事件。
   * 接收到消息时，会解析 JSON 格式的消息，并根据消息类型触发相应的自定义事件。
   * 连接关闭或发生错误时，也会触发相应的事件。
   */
  connect() {
    const url = `ws://127.0.0.1:8123/ws/picture/edit?pictureId=${this.pictureId}` // WebSocket 服务地址
    this.socket = new WebSocket(url)

    // 设置二进制数据类型为 blob
    this.socket.binaryType = 'blob'

    // 监听连接成功事件
    this.socket.onopen = () => {
      console.log('WebSocket 连接已建立')
      this.triggerEvent('open') // 触发 'open' 事件
    }

    // 监听消息事件
    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data) // 解析收到的消息
      console.log('收到消息:', message)

      // 根据消息类型触发对应事件
      const type = message.type
      this.triggerEvent(type, message)
    }

    // 监听连接关闭事件
    this.socket.onclose = (event) => {
      console.log('WebSocket 连接已关闭:', event)
      this.triggerEvent('close', event) // 触发 'close' 事件
    }

    // 监听错误事件
    this.socket.onerror = (error) => {
      console.error('WebSocket 发生错误:', error)
      this.triggerEvent('error', error) // 触发 'error' 事件
    }
  }

  /**
   * 关闭 WebSocket 连接。
   * 如果存在有效的 WebSocket 连接，则关闭它。
   */
  disconnect() {
    if (this.socket) {
      this.socket.close()
      console.log('WebSocket 连接已手动关闭')
    }
  }

  /**
   * 发送消息到后端。
   * 在发送之前，会检查 WebSocket 是否处于 OPEN 状态以确保可以发送消息。
   * @param message - 要发送的消息对象。
   */
  sendMessage(message: object) {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify(message))
      console.log('消息已发送:', message)
    } else {
      console.error('WebSocket 未连接，无法发送消息:', message)
    }
  }

  /**
   * 添加自定义事件监听。
   * 允许外部添加针对特定事件类型的监听器。这使得其他代码可以在特定事件发生时得到通知并执行相应操作。
   * @param type - 消息类型。
   * @param handler - 消息处理函数。
   */
  on(type: string, handler: (data?: any) => void) {
    if (!this.eventHandlers[type]) {
      this.eventHandlers[type] = []
    }
    this.eventHandlers[type].push(handler)
  }

  /**
   * 触发事件。
   * 当某个事件发生时，这个方法被调用来触发所有已注册的对应事件类型的处理函数。如果存在对应类型的处理函数列表，则依次调用每个处理函数，并将数据作为参数传递给它们。
   * @param type - 消息类型。
   * @param data - 消息数据（可选）。
   */
  triggerEvent(type: string, data?: any) {
    const handlers = this.eventHandlers[type]
    if (handlers) {
      handlers.forEach((handler: any) => handler(data)) // 对每个注册的处理器调用传入的数据
    }
  }
}
